<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zhong</title>

    <script src="./lib/vue.js"></script>
    <script src="./lib//vant@2.12.54_lib_vant.min.js"></script>
    <link rel="stylesheet" href="./lib//vant@2.12.54_lib_index.css">

    <style>
        .box {
            height: 15vh;
            width: 90vw;
            margin-left: 5vw;
            border-radius: 10px;
        }

        .box2 {
            margin-top: 5vh;
        }

        .player {
            height: 8vw;
            width: 8vw;
            border-radius: 10px;
            background-color: #cfcece;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 打开新牌局 -->
        <!-- 选择人数 -->
        <van-field name="stepper" label="选择人数(4~8)">
            <template #input>
                <van-stepper v-model="stepper" min="4" max="8" />
            </template>
        </van-field>
        <van-cell-group>
            <van-field v-model="player[index]" v-for="(item,index) in player" :key="index" :label="`用户${index+1}`"
                placeholder="请输入用户名"></van-field>
        </van-cell-group>
        <van-field name="stepper" label="选择倍率">
            <template #input>
                <van-stepper v-model="count" min="0.5" step="0.5" />
            </template>
        </van-field>
        <van-button type="info" size="large" plain class="box box2" @click="StartGame">开始游戏</van-button>
        <!-- 查看历史记录 -->
        <van-button type="primary" size="large" plain class="box box2" @click="InquiryHistory">历史记录</van-button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    stepper: 4,
                    player: ['', '', '', ''],
                    count: 0.5
                }
            },
            methods: {
                StartGame() {
                    let hashEmpty = false
                    this.player.map(item => {
                        if (item === "") {
                            hashEmpty = true
                        }
                    })
                    if (!hashEmpty) {
                        //检验成功
                        window.location.href = `./startgame.html?player=${JSON.stringify(this.player)}&count=${this.count}`
                    } else {
                        //检验失败
                        console.log("检验失败");
                    }
                },
                InquiryHistory() {
                    let allgamesData = localStorage.getItem('allgamesData');
                    console.log(allgamesData);

                }
            },
            watch: {
                stepper(newval, oldval) {
                    if ((newval - oldval) === 1) {
                        this.player.push('')
                    } else if ((newval - oldval) === -1) {
                        this.player.pop()
                    }
                    console.log(this.player);
                }
            }
        })
    </script>
</body>

</html>